<template>
  <div id="api">
    <el-card>
      <el-card style="text-align: left">
        <h3>手动提单</h3>
        <i style="color: #666; font-size: 13px">
          温馨提醒：提单成功即扣余额，提交失败不扣，
          <br>
          可批量提单，手机号以,隔开；格式：tel,tel,tel,...，请您按需提单 </i><br />
        <el-tag>产品名:</el-tag>
        <br />
        <el-select clearable v-model="productId" style="width: 300px; margin-top: 10px" placeholder="请选择充值产品">
          <el-option v-for="item in options" :key="item.code" :label="item.params" :value="item.params">
          </el-option>
        </el-select>
        <br />
        <el-tag style="margin-top: 10px">充值手机号:</el-tag>
        <br />
        <el-input style="width: 300px; margin-top: 10px" type="textarea" :rows="4" clearable
          placeholder="请输入充值手机号,可单/批量添加手机号,以英文,隔开" v-model="mobiles">
        </el-input>
        <br />
        <el-button type="danger" icon="el-icon-refresh" style="margin-top: 10px" size="medium" plain @click="rest()">清空
        </el-button>
        <el-button type="primary" icon="el-icon-caret-top" style="margin-top: 10px" size="medium" plain
          @click="suborder()">提单
        </el-button>
      </el-card>
    </el-card>
  </div>
</template>

<script>
import { getUserPrice, charge, charges } from "@/api/order";
export default {
  data() {
    return {
      idd: {},
      options: [],
      api_userid: "",
      mobiles: "",
      productId: "",
    };
  },
  async created() {
    let username = window.localStorage.getItem("username");
    this.api_userid = username;
    let data = {
      pageNum: 1,
      pageSize: 10,
      username: this.api_userid,
    };
    let getUserPrice1 = await getUserPrice(data);
    if (getUserPrice1) {
      this.options = getUserPrice1.data.pageList[0].priceList;

    } else { }
  },
  methods: {
    // 提单
    async suborder() {
      //随机数
      let times = Date.now();
      let date = new Date();
      let y = date.getFullYear() + "";
      let mo = date.getMonth() + 1 + "";
      let d = date.getDate() + "";
      let h = date.getHours() + "";
      let m = date.getMinutes() + "";
      let s = date.getSeconds() + "";
      if (mo.length == 2) {
      } else {
        mo = "0" + mo;
      }
      if (d.length == 2) {
      } else {
        d = "0" + d;
      }
      if (h.length == 2) {
      } else {
        h = "0" + h;
      }
      if (m.length == 2) {
      } else {
        m = "0" + m;
      }
      if (s.length == 2) {
      } else {
        s = "0" + s;
      }
      let datetime = `${y}${mo}${d}${h}${m}${s}`;
      let mdnum = Math.floor(Math.random() * 9 + 1);
      let str = `a${datetime}${times}${mdnum}`;
      //数据筛选
      let data = this.options.filter((item) => {
        if (item.params == this.productId) {
          return item;
        }
      });
      this.idd = data[0];
      // console.log(data[0]);
      // 判断
      if (data[0].supplier < 10) {
        if (this.mobiles.length == 11) {
          let data1 = {
            api_userid: this.api_userid,
            mobiles: [this.mobiles],
            productId: this.idd.code,
            seqId: str,
          };
          await charge(data1);
        } else {
          this.$message("请提交正确的11位手机号");
        }
      } else {
        if (this.mobiles.length >= 11) {
          let data1 = {
            api_userid: this.api_userid,
            mobiles: this.mobiles,
            productId: this.idd.code,
            seqId: str,
          };
          await charges(data1);
        } else {
          this.$message("通道仅支持一个11位手机号");
        }
      }
    },
    rest() {
      this.mobiles = "";
    },
  },
};
</script>

<style lang="scss" scoped>
#api {
  .firstol {
    li {
      font-size: 14px;
      line-height: 20px;

      span {
        color: #777777;
      }
    }
  }

  .secondol {
    li {
      div {
        font-size: 20px;
        font-weight: bold;
      }

      p {
        color: #777777;
      }
    }
  }
}
</style>